import React from 'react';
import ReactDOM from 'react-dom';
import {Modal} from 'antd';


type defaultPropsType = {
   title?: string,
   onOk?: () => void,
   onCancel?: () => void,
   content?: React.ReactNode
}

const useModal:
   ({
       title,
       onOk,
       onCancel,
       content
    }: defaultPropsType) => { close: () => void; open: () => void }
   = ({
         title,
         onOk,
         onCancel,
         content
      }) => {
   const div = React.useMemo(() => document.createElement('div'), []);
   const open = () => {
      ReactDOM.render(<Modal title={title} visible={true}
                             style={{top: '45px'}}
                             onOk={() => {
                                close();
                                onOk?.();
                             }}
                             onCancel={() => {
                                close();
                                onCancel?.();
                             }}>
         {content}
      </Modal>, div);
   };

   const close = () => {
      ReactDOM.unmountComponentAtNode(div);
   };

   return {open, close};
};

export default useModal;
